<template>
  <footer class="footer">
    <div class="service-container">
      <div class="service-type">
        <div class="service-type-info">
          <ul>
            <li class="service-title">购物指南</li>
            <li>购物流程</li>
            <li>会员介绍</li>
            <li>生活旅行</li>
            <li>常见问题</li>
          </ul>
        </div>
        <div class="service-type-info">
          <ul>
            <li class="service-title">配送方式</li>
            <li>上门自提</li>
            <li>配送查询</li>
            <li>收取标准</li>
            <li>物流规则</li>
          </ul>
        </div>
        <div class="service-type-info">
          <ul>
            <li class="service-title">支付方式</li>
            <li>在线支付</li>
            <li>公司转账</li>
            <li>余额支付</li>
            <li>积分支付</li>
          </ul>
        </div>
        <div class="service-type-info">
          <ul>
            <li class="service-title">售后服务</li>
            <li>售后政策</li>
            <li>退款说明</li>
            <li>返修/退货</li>
            <li>取消订单</li>
          </ul>
        </div>
        <div class="service-type-info">
          <ul>
            <li class="service-title">关于我们</li>
            <li>公司简介</li>
            <li>联系我们</li>
            <li>加入我们</li>
            <li>隐私政策</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="copyright">© 2025 商城系统</div>
  </footer>
</template>

<script setup lang="ts">
// 页脚组件逻辑
</script>

<style scoped>
.footer {
  text-align: center;
  color: #888;
  padding: 24px 0;
  background: #f8f8f8;
  margin-top: 32px;

}

.service-container {
  max-width: 1400px; /* 增加最大宽度以容纳更多列 */
  margin: 0 auto;
  padding: 0 16px;
}

.service-type {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 24px;
}

.service-type-info {
  flex: 1 1 180px; /* 调整每列的基础宽度 */
  min-width: 150px;
  padding: 0 12px; /* 减少列之间的内边距 */
  margin-bottom: 16px;
  transform: translateX(100px);
}

.service-type-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.service-type-info li {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: color 0.2s;
}

.service-type-info li:hover {
  color: #1e40af;
}

.service-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 12px !important;
  font-size: 16px;
}

.copyright {
  padding-top: 24px;
  border-top: 1px solid #e8e8e8;
  font-size: 14px;
}
</style>